// uno.config.ts
// https://zhuanlan.zhihu.com/p/688842750
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetIcons from '@unocss/preset-icons'
// import presetAttributify from '@unocss/preset-attributify'
// import transformerDirectives from '@unocss/transformer-directives'
// import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
	// 预加载策略优化
	preflights: [
		{
			getCSS: () => `
				/* 关键CSS预加载 */
				.flex { display: flex; }
				.flex-1 { flex: 1 1 0%; }
				.w-full { width: 100%; }
				.h-full { height: 100%; }
				.text-center { text-align: center; }
				.items-center { align-items: center; }
				.justify-center { justify-content: center; }
				.p-4 { padding: 1rem; }
				.m-4 { margin: 1rem; }
				.bg-white { background-color: white; }
				.text-black { color: black; }
				.border { border-width: 1px; }
				.rounded { border-radius: 0.25rem; }
				.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
			`
		}
	],
	// 预扫描策略 - 提前扫描常用类名 dev速度太慢
	// content: {
	// 	filesystem: ['src/**/*.{vue,ts,js}', 'index.html'],
	// 	pipeline: {
	// 		include: [
	// 			// 预扫描常用类名
	// 			/[\w-:]+/,
	// 			// 扫描属性化模式
	// 			/\[[\w-]+="[^"]*"\]/
	// 		]
	// 	}
	// },
	// 预加载关键类名
	safelist: [
		// 布局类
		'flex',
		'block',
		'inline-block',
		'hidden',
		'w-full',
		'h-full',
		'w-screen',
		'h-screen',
		// 间距类
		'p-2',
		'p-4',
		'm-2',
		'm-4',
		// 颜色类
		'bg-white',
		'bg-gray-100',
		'text-black',
		'text-gray-600',
		// 边框类
		'border',
		'border-gray-200',
		'rounded',
		'rounded-lg',
		// 交互类
		'hover:bg-gray-50',
		'focus:outline-none',
		'focus:ring-2',
		// 响应式类
		'md:flex',
		'lg:w-1/2',
		'sm:p-4'
	],
	presets: [
		presetUno({
			// 启用暗色模式
			dark: 'class'
		}),
		// presetAttributify() as any, // 属性化模式在新版本中可能已弃用
		presetIcons({
			scale: 1.2,
			extraProperties: {
				display: 'inline-block',
				'vertical-align': 'middle'
			}
		})
	],
	transformers: [
		// transformerDirectives() as any, // 启用 @apply 指令
		// transformerVariantGroup() as any // 启用变体组
	],
	shortcuts: [
		// 布局快捷方式
		{ 'flex-center': 'flex items-center justify-center' },
		{ 'flex-col-center': 'flex flex-col items-center justify-center' },
		{
			'absolute-center':
				'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'
		},
		// 按钮快捷方式
		{
			'btn-primary':
				'bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors'
		},
		{
			'btn-secondary':
				'bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded transition-colors'
		},
		// 卡片快捷方式
		{ card: 'bg-white rounded-lg shadow p-4 border border-gray-200' },
		// 表单快捷方式
		{
			'form-input':
				'w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500'
		},
		// 文本快捷方式
		{ 'text-title': 'text-xl font-bold text-gray-800' },
		{ 'text-subtitle': 'text-lg font-semibold text-gray-700' }
	],
	// 主题配置
	theme: {
		colors: {
			primary: {
				50: '#eff6ff',
				100: '#dbeafe',
				500: '#3b82f6',
				600: '#2563eb',
				700: '#1d4ed8'
			}
		},
		breakpoints: {
			sm: '640px',
			md: '768px',
			lg: '1024px',
			xl: '1280px',
			'2xl': '1536px'
		}
	}
})
